<div class="panel panel-default page-panel home-page">

  <div class="panel-heading clearfix">

    <div class="panel-title ">
      <div class="pull-left">
        <button type="button" class="navbar-toggle collapsed"
                ng-if="activeConfigStatus.executionMode != pipelineConstant.SLAVE"
                ng-class="{'selected' : !hideLibraryPanel}"
                ng-click="toggleLibraryPanel()"
                title="{{'home.header.toggleLibraryPane' | translate}}">
          <i class="icon-bar"></i>
          <i class="icon-bar"></i>
          <i class="icon-bar"></i>
        </button>
      </div>
      <h3 class="pull-left" translate="packageManager.title">Package Manager</h3>
    </div>

    <div ng-if="selectedNavigationItem !== extrasNavigationItem">
      <div class="pull-right">

        <a ng-disabled="hasSelectedLibrary(true) || isManagedByClouderaManager"
           ng-if="isAuthorized([userRoles.admin])"
           ng-click="hasSelectedLibrary(true) || onInstallSelectedLibrariesClick()"
           tooltip-placement="bottom"
           tooltip="{{('packageManager.header.install' | translate)  + ' (' + selectedStageLibraryList.length + ')'}}"
           tooltip-popup-delay="500"
           class="btn btn-link icon-button">
          <i class="fa fa-plus-square fa-14x"></i>
        </a>

        <a ng-disabled="common.isSlaveNode || hasSelectedLibrary(false) || isManagedByClouderaManager"
           ng-if="isAuthorized([userRoles.admin])"
           ng-click="hasSelectedLibrary(false) || onUninstallSelectedLibrariesClick()"
           tooltip-placement="bottom"
           tooltip="{{('packageManager.header.uninstall' | translate)  + ' (' + selectedStageLibraryList.length + ')'}}"
           tooltip-popup-delay="500"
           class="btn btn-link icon-button">
          <i class="fa fa-minus-square fa-14x"></i>
        </a>

      </div>

      <div class="pull-right">
        <div class="btn-group pipeline-search" >
          <input type="search" class="form-control" placeholder="Type to search"
                 ng-model="header.searchInput"
                 ng-change="updateStageLibraryList()">
          <span class="glyphicon glyphicon-remove-circle search-clear"
                ng-click="header.searchInput = '';updateStageLibraryList();"></span>
        </div>
      </div>
    </div>

    <div ng-if="selectedNavigationItem === extrasNavigationItem">
      <div class="pull-right">

        <a ng-if="isAuthorized([userRoles.admin])"
           ng-click="onUploadExtrasClick()"
           tooltip-placement="bottom"
           tooltip="{{'packageManager.uploadExtras.title' | translate}}"
           tooltip-popup-delay="500"
           class="btn btn-link icon-button">
          <i class="fa fa-upload fa-14x"></i>
        </a>

        <a ng-if="isAuthorized([userRoles.admin])"
           ng-disabled="common.isSlaveNode || !selectedStageLibraryList.length"
           ng-click="selectedStageLibraryList.length === 0 || onDeleteExtrasClick()"
           tooltip-placement="bottom"
           tooltip="{{'global.form.delete' | translate}}"
           tooltip-popup-delay="500"
           class="btn btn-link icon-button">
          <i class="fa fa-trash-o fa-14x"></i>
        </a>

      </div>
    </div>

  </div>
</div>
